<div class="upImg"></div>
<section id="marketAdd" class="pl-24 pr-24 pb-20">
	<div class="hl-list-title clearfix">
	  <h4 class="pull-left">新建项目</h4>
	</div>
	<div class="mt-15">
		<p class="font-14 color-gray">基本信息</p>
		<div class="clearfix mt-10">
			<div class="pull-left color-666 mr-10 line-height-34">渠道分类:</div>
			<div class="pull-left color-666">
				<div class="select-ul" style="width:240px;">
				    <span class="select-name br-4 box-i-shadow" ref="channelCate">请选择</span>
				    <ul>
				        <li v-for="item in channelCateArr" @click="selectedCC(item)">{{ item.dictName }}</li>
				    </ul>
				</div>
			</div>
		</div>
		<div class="clearfix mt-10">
			<div class="pull-left color-666 mr-10 line-height-34">渠道名称:</div>
			<div class="pull-left color-666">
				<div class="select-ul" style="width:240px;">
				    <span class="select-name br-4 box-i-shadow" ref="channelName">非必选</span>
				    <ul>
				        <li v-for="item in channelNameArr" @click="selectedCN(item)">{{ item.dictName }}</li>
				    </ul>
				</div>
			</div>
		</div>
		<div class="clearfix mt-10">
			<div class="pull-left color-666 mr-10 line-height-34">过程管理:</div>
			<div class="pull-left color-666">
				<div class="select-ul" style="width:240px;">
				    <span class="select-name br-4 box-i-shadow">非必选</span>
				    <ul>
				        <li v-for="item in processManagementArr" @click="selectedPM(item)">{{ item.dictName }}</li>
				    </ul>
				</div>
			</div>
		</div>
	</div>

	<div class="mt-15 pt-15">
		<div class="clearfix">
			<div class="pull-left relative init-hover1">
				<span class="color-gray">主要信息</span>
				<span class="icon-Gm-explain color-gray"></span>
				<div class="init-tips1">默认只展开必填项目，如需填写其他非必填项目，请点击右侧展开按钮。</div>
			</div>
			<div class="pull-right">
				<a href="javascript:;" @click="showTable = !showTable">{{ showTable ? '收起' : '展开' }}</a>
			</div>
		</div>
		<div class="clearfix mt-10" style="margin-right: 150px;">
			<div class="clearfix pull-left" style="margin-right: 150px;">
				<div class="pull-left line-height-34" style="width: 80px;"><span style="color: red;">*</span>项目名称:</div>
				<div class="pull-left" style="width: 240px;">
					<input type="text" class="form-control" v-model="projectName">
				</div>
			</div>
			<div class="clearfix pull-left" v-show="showTable">
				<div class="pull-left line-height-34" style="width: 80px;">项目性质:</div>
				<div class="pull-left" style="width: 240px;">
					<input type="text" class="form-control" placeholder="非必填" v-model="projectNature">
				</div>
			</div>
			<div class="clearfix pull-left mt-10" v-show="showTable" style="margin-right: 150px;">
				<div class="pull-left line-height-34" style="width: 80px;">占地面积:</div>
				<div class="pull-left" style="width: 240px;">
					<input type="number" class="form-control" placeholder="非必填" v-model="areaCoveredAcreage">
				</div>
			</div>
			<div class="clearfix pull-left mt-10" v-show="showTable">
				<div class="pull-left line-height-34" style="width: 80px;">建筑面积:</div>
				<div class="pull-left" style="width: 240px;">
					<input type="number" class="form-control" placeholder="非必填" v-model="buildingCoveredAcreage">
				</div>
			</div>
			<div class="clearfix pull-left mt-10" v-show="showTable" style="margin-right: 150px;">
				<div class="pull-left line-height-34" style="width: 80px;">总楼层:</div>
				<div class="pull-left" style="width: 240px;">
					<input type="number" class="form-control" placeholder="非必填" v-model="floorCount">
				</div>
			</div>
			<div class="clearfix pull-left mt-10" v-show="showTable">
				<div class="pull-left line-height-34" style="width: 80px;">得房率:</div>
				<div class="pull-left" style="width: 240px;">
					<input type="number" class="form-control" placeholder="非必填" v-model="roomRates">
				</div>
			</div>
			<div class="clearfix pull-left mt-10" v-show="showTable" style="margin-right: 150px;">
				<div class="pull-left line-height-34" style="width: 80px;">标准层高:</div>
				<div class="pull-left" style="width: 240px;">
					<input type="number" class="form-control" placeholder="非必填" v-model="standardStoreyHeight">
				</div>
			</div>
			<div class="clearfix pull-left mt-10" v-show="showTable">
				<div class="pull-left line-height-34" style="width: 80px;">电梯数:</div>
				<div class="pull-left" style="width: 240px;">
					<input type="number" class="form-control" placeholder="非必填" v-model="liftCount">
				</div>
			</div>
			<div class="clearfix pull-left mt-10" v-show="showTable" style="margin-right: 150px;">
				<div class="pull-left line-height-34" style="width: 80px;">车位:</div>
				<div class="pull-left" style="width: 240px;">
					<input type="number" class="form-control" placeholder="非必填" v-model="parkingCount">
				</div>
			</div>
			<div class="clearfix pull-left mt-10" v-show="showTable">
				<div class="pull-left line-height-34" style="width: 80px;">空调:</div>
				<div class="pull-left" style="width: 240px;">
					<input type="number" class="form-control" placeholder="非必填" v-model="airConditionerCount">
				</div>
			</div>
			<div class="clearfix pull-left mt-10" v-show="showTable" style="margin-right: 150px;">
				<div class="pull-left line-height-34" style="width: 80px;">租金:</div>
				<div class="pull-left" style="width: 240px;">
					<input type="number" class="form-control" placeholder="非必填" v-model="rentPrice">
				</div>
			</div>
			<div class="clearfix pull-left mt-10" v-show="showTable">
				<div class="pull-left line-height-34" style="width: 80px;">物业费:</div>
				<div class="pull-left" style="width: 240px;">
					<input type="number" class="form-control" placeholder="非必填" v-model="propertyFee">
				</div>
			</div>
			<div class="clearfix pull-left mt-10" v-show="showTable" style="margin-right: 150px;">
				<div class="pull-left line-height-34" style="width: 80px;">商圈均价:</div>
				<div class="pull-left" style="width: 240px;">
					<input type="number" class="form-control" placeholder="非必填" v-model="tradeZoneAvgPrice">
				</div>
			</div>
			<div class="clearfix pull-left mt-10" v-show="showTable">
				<div class="pull-left line-height-34" style="width: 80px;">业态:</div>
				<div class="pull-left" style="width: 240px;">
					<input type="text" class="form-control" placeholder="非必填" v-model="businessForm">
				</div>
			</div>
			<div class="clearfix pull-left" :class="{'mt-10': showTable}" :style="{marginRight: showTable ? '150px' : '0px'}">
				<div class="pull-left line-height-34" style="width: 80px;"><span style="color: red;">*</span>联系人:</div>
				<div class="pull-left clearfix" style="width: 240px;">
					<input type="text" class="form-control pull-left" placeholder="联系人" style="width: 90px;" v-model="contactName">
					<input type="text" class="form-control pull-right" placeholder="联系电话" style="width: 140px;" v-model="contactPhoneNum">
				</div>
			</div>
			<div class="clearfix pull-left mt-10" v-show="showTable">
				<div class="pull-left line-height-34" style="width: 80px;">竣工时间:</div>
				<div class="pull-left" style="width: 240px;">
					<web-calendar type="primary" v-model="buildingCompletionDate"></web-calendar>
				</div>
			</div>
		</div>
	</div>
	<div style="border-top: 1px dotted #ccc;width: 70%;margin: 20px 0 20px 68px;" v-show="showTable"></div>
	<div class="clearfix" v-show="showTable">
		<div class="pull-left line-height-34" style="width: 80px;">业主名称:</div>
		<div class="pull-left" style="width: 240px;">
			<input type="text" class="form-control" placeholder="非必填" v-model="proprietorName">
		</div>
	</div>
	<div class="clearfix mt-10" v-show="showTable">
		<div class="clearfix pull-left" style="margin-right: 150px;">
			<div class="pull-left line-height-34" style="width: 80px;">业主性质:</div>
			<div class="pull-left" style="width: 240px;">
				<input type="text" class="form-control" placeholder="非必填" v-model="proprietorProperty">
			</div>
		</div>
		<div class="clearfix pull-left">
			<div class="pull-left line-height-34" style="width: 80px;">开发商:</div>
			<div class="pull-left" style="width: 240px;">
				<input type="text" class="form-control" placeholder="非必填" v-model="developers">
			</div>
		</div>
	</div>
	<div class="clearfix mt-10" v-show="showTable">
		<div class="pull-left line-height-34" style="width: 80px;">地理区位:</div>
		<div class="pull-left" style="width: 710px;">
			<input type="text" class="form-control" placeholder="非必填" v-model="positionInfo">
		</div>
	</div>
	<div class="clearfix mt-10" v-show="showTable">
		<div class="pull-left line-height-34" style="width: 80px;">交通配套:</div>
		<div class="pull-left" style="width: 710px;">
			<input type="text" class="form-control" placeholder="非必填" v-model="transportationFacilities">
		</div>
	</div>
	<div class="clearfix mt-10">
		<div class="pull-left line-height-34" style="width: 80px;"><span style="color: red;">*</span>项目所在地:</div>
		<div class="pull-left dy-flex" style="width: 710px;">
			<div class="select-ul mr-10" style="width: 120px;">
				<span class="select-name br-4 box-i-shadow" ref="provinceSel">请选择省份</span>
			  <ul>
			    <li v-for="item in provinceList" @click="setProvince(item)">{{ item.name }}</li>
			  </ul>
			</div>
			<div class="select-ul mr-10" style="width: 120px;">
				<span class="select-name br-4 box-i-shadow" ref="citySel">请选择城市</span>
			  <ul>
			    <li v-for="item in cityList" @click="setCity(item)">{{ item.name }}</li>
			  </ul>
			</div>
			<div class="select-ul" style="width: 120px;">
				<span class="select-name br-4 box-i-shadow" ref="areaSel">请选择区县</span>
			  <ul>
			    <li v-for="item in areaList" @click="setArea(item)">{{ item.name }}</li>
			  </ul>
			</div>
		</div>
	</div>
	<div class="clearfix mt-10">
		<div class="pull-left line-height-34" style="width: 80px;"><span style="color: red;">*</span>详细地址:</div>
		<div class="pull-left" style="width: 710px;">
			<input type="text" class="form-control" v-model="address">
		</div>
	</div>
	<div class="clearfix mt-10" v-show="showTable">
		<div class="pull-left line-height-34" style="width: 80px;">项目描述:</div>
		<div class="pull-left" style="width: 710px;">
			<textarea rows="4" class="form-control" v-model="projDesc"></textarea>
		</div>
	</div>
	
	<!-- 自定义 -->
	<div class="mt-15">
		<hl-custom-fileds :data="tmpData" type="MARKET_EXPANSION_PROJECT" v-model="resData"></hl-custom-fileds>
	</div>


	<div class="border-t mt-15 pt-15">
		<p class="color-gray">项目图片</p>
		<ul class="clearfix project-img mt-10">
			<li class="relative pull-left mt-10" :style="{marginRight: index == 5 ? '200px' : '14px'}" v-for="(item, index) in urlArr">
				<img :src="item.url" />
				<div class="del-img cursor" @click="delImg(index)">删除</div>
			</li>
			<li class="icon-Gm-add relative add-project-img pull-left cursor mt-10" v-if="urlArr.length < 9" @click="upImg">
				<p>至多上传9张图片</p>
			</li>
		</ul>
	</div>

	<div class="border-t mt-15 pt-15">
		<div class="clearfix">
			<div class="pull-left relative">
				<span class="color-gray">详细信息</span>
				<span style="color: #ccc;">（此模块内容全部是非必填项目）</span>
			</div>
			<div class="pull-right">
				<a href="javascript:;" @click="detailFlag = !detailFlag">{{ detailFlag ? '收起' : '展开' }}</a>
			</div>
		</div>
		<div class="clearfix mt-10" v-show="detailFlag">
			<div class="clearfix pull-left" style="margin-right: 150px;">
				<div class="pull-left line-height-34" style="width: 130px;">项目法定名称:</div>
				<div class="pull-left" style="width: 240px;">
					<input type="text" class="form-control" v-model="projLegalName">
				</div>
			</div>
			<div class="clearfix pull-left">
				<div class="pull-left line-height-34" style="width: 130px;">项目公司全称:</div>
				<div class="pull-left" style="width: 240px;">
					<input type="text" class="form-control" v-model="companyFullName">
				</div>
			</div>
			<div class="clearfix pull-left mt-10" style="margin-right: 150px;">
				<div class="pull-left line-height-34" style="width: 130px;">法人:</div>
				<div class="pull-left" style="width: 240px;">
					<input type="text" class="form-control" v-model="legalPersonName">
				</div>
			</div>
			<div class="clearfix pull-left mt-10">
				<div class="pull-left line-height-34" style="width: 130px;">项目产权人:</div>
				<div class="pull-left" style="width: 240px;">
					<input type="text" class="form-control" v-model="projPrOwnerName">
				</div>
			</div>
			<div class="clearfix pull-left mt-10" style="margin-right: 150px;">
				<div class="pull-left line-height-34" style="width: 130px;">关联公司:</div>
				<div class="pull-left" style="width: 240px;">
					<div class="select-ul">
					    <span class="select-name br-4 box-i-shadow" ref="company">请选择</span>
					    <ul>
					        <li v-for="item in companyArr" @click="selectCompany(item)">{{ item.shortName }}</li>
					    </ul>
					</div>
				</div>
			</div>
			<div class="clearfix pull-left mt-10">
				<div class="pull-left line-height-34" style="width: 130px;" >可出租面积:</div>
				<div class="pull-left" style="width: 240px;">
					<input type="number" class="form-control" v-model="rentAcreage">
				</div>
			</div>
			<div class="clearfix pull-left mt-10" style="margin-right: 150px;">
				<div class="pull-left line-height-34" style="width: 130px;">土地使用权到期日:</div>
				<div class="pull-left" style="width: 240px;">
					<web-calendar v-model="landUseRightsExpireDate"></web-calendar>
				</div>
			</div>
			<div class="clearfix pull-left mt-10">
				<div class="pull-left line-height-34" style="width: 130px;">加入物业组合日期:</div>
				<div class="pull-left" style="width: 240px;">
					<web-calendar v-model="propertyAccessionDate"></web-calendar>
				</div>
			</div>
			<div class="clearfix pull-left mt-10">
				<div class="pull-left line-height-34" style="width: 130px;">权益系数:</div>
				<div class="pull-left" style="width: 240px;">
					<input type="number" class="form-control" v-model="rightsInterestsRates">
				</div>
			</div>
		</div>
		<div class="clearfix mt-10" v-show="detailFlag">
			<div class="pull-left line-height-34" style="width: 130px;">物业概况:</div>
			<div class="pull-left" style="width: 760px;">
				<textarea rows="4" class="form-control" v-model="propertyProfile"></textarea>
			</div>
		</div>
	</div>
	<div class="submit mt-15 pt-15 border-t">
		<button type="button" class="btn n-btn-primary" @click="validate">保存</button>
	</div>

	<div class="project-wrap-pop" v-if="flag">
		<div class="project-pop">
			<div class="close icon-Gm-close font-16" @click="flag = !flag"></div>
			<div class="title">重复项目</div>
			<p>已存在项目，确认继续保存此项目？</p>
			<div class="button-footer">
				<div class="save-erweima cursor" @click="submit">保存</div>
				<div class="cancel-erweima cursor" @click="flag = !flag">取消</div>
			</div>
		</div>
	</div>
</section>

<script src="modules/market/scripts/add.js" charset="utf-8"></script>

<style type="text/css">
	.hl-radio-container li{
		margin-bottom: 10px;
	}
  
	.init-hover1:hover .init-tips1 {
		display: block;
	}
	.init-tips1 {
		display: none;
		width: 190px;
		position: absolute;
		left: -20px;
		top: 28px;
		background: #fff;
		filter: drop-shadow(0 0 5px rgba(0, 0, 0, .2));
		padding: 10px;
		border-radius: 4px;
		z-index: 1;
	}

	.init-tips1:before {
		content: '';
		position: absolute;
		left: 42%;
		top: -16px;
		width: 0;
		height: 0;
		border-width: 8px;
		border-style: solid;
		border-color: transparent transparent #fff transparent;
	}
	.hl-checkbox {
		margin-left: 10px;
	}
	.hl-checkbox::before {
		top: 1px;
	}
	.hl-checkbox.active::before {
		top: 1px;
	}
	.project-wrap-pop {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,.4);
		z-index: 999;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.project-pop {
		width: 400px;
		background: #fff;
		position: relative;
		border-radius: 4px;
		overflow: hidden;
	}
	.project-pop .close {
		position: absolute;
		right: 0;
		top: 0;
		width: 45px;
		height: 45px;
		text-align: center;
		line-height: 45px;
	}
	.project-pop .title {
		font-size: 16px;
		text-align: center;
		color: #565E99;
		padding-top: 35px;
	}
	.project-pop p {
		font-size: 14px;
		color: #999;
		text-align: center;
		padding: 15px 0 50px;
	}
	.button-footer {
    display: flex;
	}
	.button-footer>div {
    flex: 1;
    height: 45px;
    line-height: 45px;
    text-align: center;
    color: #666;
    background: rgba(249,249,249,1);
	}
	.button-footer .save-erweima {
    background: rgba(68,73,135,1);
    color: #fff;
	}
	.project-img li {
		width: 110px;
		height: 110px;
		margin-right: 14px;
		background:rgba(241,241,241,1);
	}
	.project-img li img {
		width: 110px;
		height: 110px;
		display: block;
	}
	.project-img li .del-img {
		width:110px;
		height:34px;
		background:rgba(0,0,0,0.5);
		line-height: 34px;
		text-align: center;
		position: absolute;
		left: 0;
		bottom: 0;
		color: #fff;
	}
	.project-img li.add-project-img {
		line-height: 110px;
		text-align: center;
		font-size: 26px;
		color: #C5C5C5;
	}
	.project-img li.add-project-img p {
		font-size: 12px;
		color:rgba(204,204,204,1);
		line-height: 17px;
		position: absolute;
		left: 10px;
		bottom: 5px;
	}
	.custom_container{
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
	}
  .custom_container>div{
    display: flex;
    margin-bottom: 10px;
	margin-right: 20px;
  }
	.custom_title{
    padding-left: 8px;
    width: 105px;
    position: relative;
  }
  .custom_title>span{
    position: absolute;
    left: 0px;
  }
  .hl-checkbox-container ul{
    
  }
  .hl-checkbox-container .item{
    margin-bottom: 10px;
  }
  .alignItems{
    align-items: flex-start!important;
  }
	input[type=number] {
    -moz-appearance:textfield;
	}
	input[type=number]::-webkit-inner-spin-button,
	input[type=number]::-webkit-outer-spin-button {
			-webkit-appearance: none;
			margin: 0;
	}
</style>
